<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试报告 - SmarTest Studio</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/notification.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/report.css') }}">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <!-- 顶部标题栏 -->
    <header class="header">
        <div class="header-left">
            <button class="btn menu-btn" title="菜单">
                <i class="bi bi-grid-3x3-gap-fill"></i>
            </button>
            <button class="btn home-btn" title="首页" onclick="window.location.href='/'">
                <img src="{{ url_for('static', filename='img/logo.svg') }}" alt="SmarTest Studio" class="logo">
                <span>SmarTest Studio</span>
            </button>
            <div class="report-path">
                <span class="separator"></span>
                <span class="path">{{ report.name }}</span>
            </div>
        </div>
        <div class="header-right">
            <div class="dropdown">
                <button class="btn dropdown-toggle" type="button" id="permissionDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-shield-lock"></i>
                    <span>权限管理</span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="permissionDropdown">
                    <li><a class="dropdown-item" href="#">用户管理</a></li>
                    <li><a class="dropdown-item" href="#">角色管理</a></li>
                    <li><a class="dropdown-item" href="#">权限设置</a></li>
                </ul>
            </div>
            <div class="dropdown">
                <button class="btn dropdown-toggle" type="button" id="helpDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-question-circle"></i>
                    <span>帮助</span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="helpDropdown">
                    <li><a class="dropdown-item" href="#">使用指南</a></li>
                    <li><a class="dropdown-item" href="#">API文档</a></li>
                    <li><a class="dropdown-item" href="#">关于</a></li>
                </ul>
            </div>
            <div class="dropdown">
                <button class="btn dropdown-toggle" type="button" id="notificationDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-bell"></i>
                    <span class="notification-badge">3</span>
                </button>
                <ul class="dropdown-menu notification-menu" aria-labelledby="notificationDropdown">
                    <li><a class="dropdown-item" href="#">测试完成: 项目1</a></li>
                    <li><a class="dropdown-item" href="#">设备连接成功: 设备2</a></li>
                    <li><a class="dropdown-item" href="#">新报告生成</a></li>
                </ul>
            </div>
            <div class="dropdown">
                <button class="btn dropdown-toggle" type="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <img src="{{ url_for('static', filename='img/avatar.svg') }}" alt="用户头像" class="avatar">
                </button>
                <ul class="dropdown-menu" aria-labelledby="userDropdown">
                    <li><a class="dropdown-item" href="#">个人资料</a></li>
                    <li><a class="dropdown-item" href="#">设置</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#">退出登录</a></li>
                </ul>
            </div>
        </div>
    </header>

    <!-- 报告工具栏 -->
    <div class="report-toolbar">
        <div class="toolbar-left">
            <button class="btn btn-outline-secondary" title="返回" onclick="window.location.href='/'">
                <i class="bi bi-arrow-left"></i>
            </button>
            <h4 class="report-title">{{ report.name }}</h4>
        </div>
        <div class="toolbar-right">
            <button class="btn btn-outline-primary" title="导出PDF">
                <i class="bi bi-file-pdf"></i> 导出PDF
            </button>
            <button class="btn btn-outline-primary" title="导出Excel">
                <i class="bi bi-file-excel"></i> 导出Excel
            </button>
            <button class="btn btn-outline-primary" title="打印">
                <i class="bi bi-printer"></i> 打印
            </button>
        </div>
    </div>

    <!-- 报告内容 -->
    <div class="report-container">
        <!-- 报告摘要 -->
        <div class="report-section report-summary">
            <div class="summary-header">
                <h5>测试报告摘要</h5>
                <span class="status-badge {{ report.status == '通过' ? 'status-passed' : (report.status == '失败' ? 'status-failed' : 'status-partial') }}">{{ report.status }}</span>
            </div>
            <div class="summary-content">
                <div class="summary-item">
                    <span class="summary-label">报告名称:</span>
                    <span class="summary-value">{{ report.name }}</span>
                </div>
                <div class="summary-item">
                    <span class="summary-label">创建者:</span>
                    <span class="summary-value">{{ report.owner }}</span>
                </div>
                <div class="summary-item">
                    <span class="summary-label">测试用例:</span>
                    <span class="summary-value">{{ report.testcase }}</span>
                </div>
                <div class="summary-item">
                    <span class="summary-label">测试设备:</span>
                    <span class="summary-value">{{ report.device }}</span>
                </div>
                <div class="summary-item">
                    <span class="summary-label">创建时间:</span>
                    <span class="summary-value">{{ report.created }}</span>
                </div>
                <div class="summary-item">
                    <span class="summary-label">执行时长:</span>
                    <span class="summary-value">2分30秒</span>
                </div>
            </div>
        </div>

        <!-- 测试结果统计 -->
        <div class="report-section report-stats">
            <h5>测试结果统计</h5>
            <div class="stats-container">
                <div class="stats-charts">
                    <div class="chart-container">
                        <canvas id="resultChart"></canvas>
                    </div>
                    <div class="chart-container">
                        <canvas id="performanceChart"></canvas>
                    </div>
                </div>
                <div class="stats-summary">
                    <div class="stat-card">
                        <div class="stat-value">15</div>
                        <div class="stat-label">总测试用例</div>
                    </div>
                    <div class="stat-card success">
                        <div class="stat-value">12</div>
                        <div class="stat-label">通过</div>
                    </div>
                    <div class="stat-card warning">
                        <div class="stat-value">2</div>
                        <div class="stat-label">部分通过</div>
                    </div>
                    <div class="stat-card danger">
                        <div class="stat-value">1</div>
                        <div class="stat-label">失败</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 测试用例详情 -->
        <div class="report-section report-details">
            <h5>测试用例详情</h5>
            <div class="table-container">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>测试用例</th>
                            <th>描述</th>
                            <th>状态</th>
                            <th>执行时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>启动应用测试</td>
                            <td>验证应用能否正常启动</td>
                            <td><span class="status-badge status-passed">通过</span></td>
                            <td>5秒</td>
                            <td>
                                <button class="btn btn-sm btn-link" data-bs-toggle="modal" data-bs-target="#caseDetailModal" data-case-id="1">
                                    <i class="bi bi-eye"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>登录功能测试</td>
                            <td>验证用户登录功能</td>
                            <td><span class="status-badge status-passed">通过</span></td>
                            <td>10秒</td>
                            <td>
                                <button class="btn btn-sm btn-link" data-bs-toggle="modal" data-bs-target="#caseDetailModal" data-case-id="2">
                                    <i class="bi bi-eye"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>导航菜单测试</td>
                            <td>验证导航菜单功能</td>
                            <td><span class="status-badge status-passed">通过</span></td>
                            <td>8秒</td>
                            <td>
                                <button class="btn btn-sm btn-link" data-bs-toggle="modal" data-bs-target="#caseDetailModal" data-case-id="3">
                                    <i class="bi bi-eye"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>表单提交测试</td>
                            <td>验证表单提交功能</td>
                            <td><span class="status-badge status-partial">部分通过</span></td>
                            <td>15秒</td>
                            <td>
                                <button class="btn btn-sm btn-link" data-bs-toggle="modal" data-bs-target="#caseDetailModal" data-case-id="4">
                                    <i class="bi bi-eye"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>性能测试</td>
                            <td>验证应用性能</td>
                            <td><span class="status-badge status-failed">失败</span></td>
                            <td>30秒</td>
                            <td>
                                <button class="btn btn-sm btn-link" data-bs-toggle="modal" data-bs-target="#caseDetailModal" data-case-id="5">
                                    <i class="bi bi-eye"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 问题与建议 -->
        <div class="report-section report-issues">
            <h5>问题与建议</h5>
            <div class="issues-container">
                <div class="issue-card">
                    <div class="issue-header">
                        <span class="issue-type error"><i class="bi bi-exclamation-triangle"></i> 错误</span>
                        <span class="issue-id">#1</span>
                    </div>
                    <div class="issue-content">
                        <h6>性能测试失败</h6>
                        <p>应用在高负载情况下响应时间超过预期阈值，平均响应时间为2.5秒，超过了1秒的阈值。</p>
                    </div>
                    <div class="issue-footer">
                        <span class="issue-location">性能测试.test:25</span>
                    </div>
                </div>
                <div class="issue-card">
                    <div class="issue-header">
                        <span class="issue-type warning"><i class="bi bi-exclamation-circle"></i> 警告</span>
                        <span class="issue-id">#2</span>
                    </div>
                    <div class="issue-content">
                        <h6>表单验证不完整</h6>
                        <p>表单提交测试中发现部分字段验证逻辑不完整，可能导致无效数据提交。</p>
                    </div>
                    <div class="issue-footer">
                        <span class="issue-location">表单提交测试.test:12</span>
                    </div>
                </div>
                <div class="issue-card">
                    <div class="issue-header">
                        <span class="issue-type info"><i class="bi bi-info-circle"></i> 建议</span>
                        <span class="issue-id">#3</span>
                    </div>
                    <div class="issue-content">
                        <h6>优化启动时间</h6>
                        <p>应用启动时间为5秒，建议优化启动流程，目标启动时间应控制在3秒以内。</p>
                    </div>
                    <div class="issue-footer">
                        <span class="issue-location">启动应用测试.test:8</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 测试环境 -->
        <div class="report-section report-environment">
            <h5>测试环境</h5>
            <div class="environment-container">
                <div class="environment-item">
                    <span class="environment-label">设备型号:</span>
                    <span class="environment-value">OpenHarmony Device</span>
                </div>
                <div class="environment-item">
                    <span class="environment-label">系统版本:</span>
                    <span class="environment-value">OpenHarmony 3.1</span>
                </div>
                <div class="environment-item">
                    <span class="environment-label">API版本:</span>
                    <span class="environment-value">9</span>
                </div>
                <div class="environment-item">
                    <span class="environment-label">屏幕分辨率:</span>
                    <span class="environment-value">1080x2340</span>
                </div>
                <div class="environment-item">
                    <span class="environment-label">内存:</span>
                    <span class="environment-value">4GB</span>
                </div>
                <div class="environment-item">
                    <span class="environment-label">存储:</span>
                    <span class="environment-value">64GB</span>
                </div>
                <div class="environment-item">
                    <span class="environment-label">测试工具版本:</span>
                    <span class="environment-value">SmarTest 1.0.0</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 测试用例详情模态框 -->
    <div class="modal fade" id="caseDetailModal" tabindex="-1" aria-labelledby="caseDetailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="caseDetailModalLabel">测试用例详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="case-detail-container">
                        <div class="case-header">
                            <h6 id="caseTitle">测试用例标题</h6>
                            <span id="caseStatus" class="status-badge">状态</span>
                        </div>
                        <div class="case-info">
                            <div class="info-item">
                                <span class="info-label">ID:</span>
                                <span id="caseId" class="info-value">1</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">描述:</span>
                                <span id="caseDescription" class="info-value">测试用例描述</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">执行时间:</span>
                                <span id="caseExecutionTime" class="info-value">10秒</span>
                            </div>
                        </div>
                        <div class="case-steps">
                            <h6>执行活动</h6>
                            <ol id="caseSteps" class="steps-list">
                                <!-- 活动将通过JavaScript动态加载 -->
                            </ol>
                        </div>
                        <div class="case-screenshots">
                            <h6>截图</h6>
                            <div id="caseScreenshots" class="screenshots-container">
                                <!-- 截图将通过JavaScript动态加载 -->
                            </div>
                        </div>
                        <div class="case-logs">
                            <h6>日志</h6>
                            <pre id="caseLogs" class="logs-container"><!-- 日志将通过JavaScript动态加载 --></pre>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">导出详情</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 脚本引用 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url_for('static', filename='js/a11y-modal-fix.js') }}"></script>
    <script src="{{ url_for('static', filename='js/http-client.js') }}"></script>
    <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
    <script src="{{ url_for('static', filename='js/report.js') }}"></script>
</body>
</html>